<template xmlns:v-touch="http://www.w3.org/1999/xhtml">
<div>
  <div class="coupon_tit" :class="{'coupon_bg':typeShow}" v-show="typeShow" :style="{background:showInner?'#fff' : ''}">
    <div class="coupon_tit_left">
      <b>{{couponTit || "猜你喜欢"}}</b> {{couponTit2}}
    </div>
    <div class="coupon_tit_list">
      <ul>
        <li :class="{'hot':tab1 == 'all'}" @click="tabEvent('all')">全部</li>
        <li :class="{'hot':tab1 == 'cash'}" @click="tabEvent('cash')">代金券</li>
        <li :class="{'hot':tab1 == 'rebate'}" @click="tabEvent('rebate')">折扣券</li>
        <li :class="{'hot':tab1 == 'voucher'}" @click="tabEvent('voucher')">抵用券</li>
      </ul>
    </div>
  </div>
  <filter-search v-if="filterCon" @click-screening='clickScreening' :view="view"></filter-search>
  <div class="list_bg">
    <div class="clear"></div>
    <div class="coupon_list" v-infinite-scroll="moreList" infinite-scroll-disabled="loading" infinite-scroll-immediate-check="true" infinite-scroll-distance="100">
      <ul>
        <!-- 代金券-->
        <li v-for="coupon in couponInfo" v-if="!coupon.mchtName">
          <div class="selled" v-if="showInner" v-show=" coupon.sellNum > 1 ">{{coupon.sellNum || 0}}张</div>
          <a @click="couponDetail(coupon)">
            <div class="coupon_img">
              <img v-lazy="coupon.mchtLogUrl || oneCouponMer.mchtLogUrl||couponShop.mchtLogUrl">
              <div class="coupon_tag" v-if="coupon.couponType" :class="{'tag_bg_yellow':coupon.couponType=='cash','tag_bg_green':coupon.couponType=='rebate','tag_bg_blue':coupon.couponType=='voucher','tag_bg_orange':coupon.couponType=='present','tag_bg_purple':coupon.couponType=='ticket' }">{{coupon.couponType | couponTp}}</div>
              <div class="coupon_tag" v-if="coupon.type" :class="{'tag_bg_yellow':coupon.type=='cash','tag_bg_green':coupon.type=='rebate','tag_bg_blue':coupon.type=='voucher','tag_bg_orange':coupon.type=='present','tag_bg_purple':coupon.type=='ticket' }">{{coupon.type | couponTp}}</div>
              <div class="coupon_tag" :class="{'tag_bg_yellow':coupon.type=='cash','tag_bg_green':coupon.type=='rebate','tag_bg_blue':coupon.type=='voucher','tag_bg_orange':coupon.type=='present','tag_bg_purple':coupon.type=='ticket' }">{{coupon.type | couponTp}}</div>
            </div>
            <div class="coupon_info" v-if="showInner">
              <div class="coupon_info_tit"><b>{{coupon.couponName|| coupon.name }}</b></div>
              <div class="coupon_info_item">
                <p class="info_r">
                  {{coupon.mchtArea ||couponShop.mchtArea}} <span v-if="isShowDistance === 'true'">{{( (coupon.distance+'') || oneCouponMer.mchtSearch.distance) | setDistance}}</span>
                </p>
                <p>有效期至：{{coupon.validatyEnd | endTime2}}</p>
              </div>
              <div class="coupon_info_item">
                <p class="info_r">已售出{{coupon.soldnum}}</p>
                <star :couponComScore="coupon.couponComScore||coupon.comScore||0"></star>
                <p class="info_pad">{{coupon.couponComNum||coupon.comNum || 0}}条</p>
              </div>
              <div class="clear"></div>
              <div class="coupon_info_item">
                <p class="info_r">已使用{{coupon.usednum}}
                </p>
                <p class="left">{{coupon.mchtType||couponShop.mchtTypeValue}}</p>
                <p class="left info_pad">面值 <b class="red_color">{{coupon.denomination | denomination(coupon.type || coupon.couponType)}}</b></p>
              </div>
            </div>
            <div v-if="!showInner" class="index_cp_info">
              <div class="index_cp_l">
                <p class="index_cp_tit">{{coupon.name }}</p>
                <p class="index_cp_star">
                  <star :couponComScore="coupon.comScore"></star>
                </p>
                <p class="index_cp_txt">{{coupon.mchtTypeValue+'' || oneCouponMer.mchtSearch.mchtTypeValue}}<span class="pad_l">面值</span><span class="pad_l red_color">{{coupon.denomination | denomination(coupon.couponType || coupon.type)}}</span></p>
                <p class="index_cp_txt">{{coupon.mchtArea || '无'}}<span class="pad_l"></span></p>
              </div>
              <div class="index_cp_r">
                <p class="index_cp_pri"><b>{{coupon.yunCur}}</b>芸券</p>
                <p class="index_cp_bt">已售出 {{coupon.soldnum}}</p>
                <p class="index_cp_bt">已使用 {{coupon.usednum}}</p>
              </div>
            </div>
          </a>
          <div class="clear"></div>
          <div class="coupon_bot btnLine" v-show="showInner">
            <a @click="couponDetail(coupon)" class="coupon_bot_btn">立即兑换</a>
            <b class="coupon_money">{{coupon.valuation || coupon.yunCur}}</b>
            <span>芸券</span>
            <img class="user_img" v-lazy="coupon.usrPicUrl">
            <span>{{coupon.usrName}}</span>
          </div>
        </li>
        <!-- 商户-->
        <li v-for="coupon in couponInfo" v-if="coupon.mchtName">
          <a @click="couponDetail(coupon)">
            <div class="coupon_img">
              <img v-lazy="coupon.mchtLogUrl">
            </div>
            <div class="coupon_info" v-if="showInner">
              <div class="coupon_info_tit"><b>{{coupon.mchtName}}</b></div>
              <div class="coupon_info_item">
                <p class="info_r">
                  {{coupon.mchtArea}} {{coupon.distance | setDistance}}
                </p>
                <star :couponComScore="coupon.mchtComScore"></star>
                <p class="info_pad">{{(coupon.mchtComNum || coupon.comNum) || 0}}条</p>
              </div>

              <div class="clear"></div>
              <div class="coupon_info_item">
                <p class="right red_color">￥{{coupon.mchtPer}}/人</p>
                <p class="left">{{coupon.mchtTypeValue}}</p>
              </div>
              <div class="coupon_info_item">{{coupon.mchtAddr}}</div>
            </div>
            <div v-if="!showInner" class="index_cp_info">
              <div class="index_cp_l">
                <p class="index_cp_tit">{{coupon.name}}</p>
                <p class="index_cp_star">
                  <star :couponComScore="coupon.comScore"></star>
                </p>
                <p class="index_cp_txt">{{coupon.mchtTypeValue || oneCouponMer.mchtTypeValue}}<span class="pad_l">面值</span><span class="pad_l red_color">￥{{coupon.denomination | denomination(coupon.mchtTypeValue || coupon.type)}}</span></p>
                <p class="index_cp_txt">{{coupon.mchtArea || '无'}}<span class="pad_l"></span></p>
              </div>
              <div class="index_cp_r">
                <p class="index_cp_pri"><b>{{coupon.valuation}}</b>芸券</p>
                <p class="index_cp_bt">已售出 {{coupon.soldnum}}</p>
                <p class="index_cp_bt">已使用 {{coupon.usednum}}</p>
              </div>
            </div>
          </a>
          <div class="clear"></div>

          <mcht-coupon :couponName="coupon.couponName" :couponType="coupon.couponType" :denomination="coupon.denomination"></mcht-coupon>

        </li>
      </ul>
    </div>
  </div>
  <no-data v-if="couponInfo.length == 0"></no-data>
  <div class="loading-box" v-show="showLoading && couponInfo.length > 4">
    <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreCoupon"></list-loading>
  </div>
  <div class="lastInfo" v-show="!showLoading && couponInfo.length != 0">
    已经是最后一条
  </div>
  <!-- <shade :shadeS="false"></shade> -->
</div>
</template>
<script>
import listLoading from './listLoading.vue'
import exchangeBox from './exchangeBox.vue'
import mchtCoupon from './mchtCoupon.vue'
import star from './star.vue'
import * as types from '../../vuex/types.js'
import getData from '../../service/getData.js'
import {
  mapState
} from 'vuex'
import FilterSearch from './filterSearch.vue'
import {Storage} from 'src/utils/storage.js'

export default {
  data() {
    return {
      count: 1,
      noMoreCoupon: true,
      loading: true,
      myKey: '',
      tab1: 'all',
      ftShai: '',
      showLoading: true,
      exchageShow: false, //快速兑换
      couponParam: {},
      oneCouponMer: {},
      munuKey: '',
      myRootType: this.rootType,
      isShowDistance: false,
      couponShop: '',
      couponLength: '',
    }
  },
  components: {
    listLoading,
    star,
    exchangeBox,
    mchtCoupon,
    FilterSearch
  },
  props: {
    typeShow: {
      type: String,
      default: ''
    },
    filterCon:{
      type: String,
      default: ''
    },
    showInner: {
      type: String,
      default: ''
    },
    rootType: {
      type: String,
      default: 'search'
    },
    recomm: {
      default: function() {
        return {}
      }
    },
    oneCouponData: {
      default: function() {
        return {}
      }
    },
    couponTit2: {
      type: String,
      default: '扶墙进,扶墙出'
    },
    view: {
      type: String,
      default: ''
    }
  },
  created() {
    console.log('created' + this.rootType);
    this.couponLength = this.couponInfo.length;
    this.$store.commit(types.GET_PAGE_NUM, 1);
    this.$store.commit(types.GET_COUPON_LIST);
    this.$store.commit(types.GET_SCORLL_STATUS, true);
    if (this.userInfo.usrId) {
      this.clickMoreList();
    }
    if(!this.oneCouponData){
    	this.oneCouponMer = Storage.get("oneCouponMer", true);
    }

  },
  computed: {
    ...mapState({
      couponTit: state => state.coupon.couponTit, //左上角标题
      couponInfo: state => state.coupon.couponInfo, //电子券数组
      couponInfoPageLimit: state => state.coupon.couponInfoPageLimit, //分页限制
      couponKey: state => state.coupon.couponKey, //搜索关键字
      searchType: state => state.coupon.searchType, //搜索类型
      userInfo: state => state.user.userInfo,
      setOwnerInfo: state => state.coupon.setOwnerInfo, //设置个人信息
      position: state => state.coupon.position, //用户地理位置
      couponPay: state => state.pay.couponPay,
      couponScreen: state => state.coupon.couponScreen, // 筛选值
      couponDistance: state => state.coupon.couponDistance, // 距离
      filterType: state => state.coupon.filterType, // 筛选类型
    })
  },
  watch: {
    userInfo() {
      me.clickMoreList();
    }
  },

  methods: {
    // 筛选
    clickScreening() { //获取筛选结果
      this.myRootType = 'search'
      this.$store.commit(types.GET_PAGE_NUM, 1);
      this.$store.commit(types.GET_COUPON_LIST);
      this.noMoreCoupon = true;
      this.clickMoreList();
    },
    clickMoreList() {
      if (!this.noMoreCoupon) { //防止重复点击
        return
      }
      let me = this;
      this.noMoreCoupon = false;
      //请求模块类型判断
      var postAction = '';
      var param = {};
      if (this.myRootType == 'like') { //猜你喜欢
        me.showLoading = false;
        postAction = 'guessLike';
        param = {
          method: 'post',
          data: {
            "couponType": me.tab1,
            "browseType": ''
          }
        }
      } else if (this.myRootType == 'foodClass') { //餐饮分类
        // postAction = 'getFoodClass';
        postAction = 'getCouponList';
        param = {
          method: 'post',
          data: {
            near: '',
            mchtType: this.couponTit === '全部' ? '*' : this.couponTit,
            mchtFacil: '',
            "couponType": me.tab1,
            "couponName": me.couponKey || '*',
            "couponType": me.tab1 == 'all' ? '*' : me.tab1,
            "position": me.position || '' // 121.6248,31.326
          }
        }
      } else if (this.myRootType == 'recommend') { //推荐最优电子券
        postAction = 'getRecCoupon';
        param = {
          method: 'post',
          data: me.recomm
        }
      } else if (this.myRootType == 'oneCoupon') { //(商户下)挂单电子券
        postAction = 'getOneCoupon';
        param = {
          method: 'post',
          data: me.oneCouponData
        }
      } else { //搜索foodClass
        // var getType = this.filterType;
        let near = this.couponDistance // 附近
        let mchtType = this.couponTit === '全部' ? '*' : this.couponTit
        let mchtFacil = this.couponScreen.mchtFacil // 设施

        if (me.tab1 == 'all') {
          me.tab1 = "*";
        }
        if (this.searchType == 'cop' || !this.searchType) {
          postAction = 'getCouponList';
          param = {
            method: 'post',
            data: {
              near,
              mchtType,
              mchtFacil,
              "couponType": me.tab1,
              "couponName": me.couponKey || '*',
              "position": me.position || '' // 121.6248 31.326
            }
          }
        } else {
          postAction = 'getMerList';
          param = {
            method: 'post',
            data: {
              near,
              mchtType,
              mchtFacil,
              "couponType": me.tab1,
              "mchtName": me.couponKey,
              "position": me.position || '' // 121.6248 31.326
            }
          }
        }
      }

      //开始执行请求
      this.$store.dispatch(postAction, param).then(function(rep) {
        if (me.myRootType == 'like') {
          return;
        }
        me.couponShop = rep.content;
        if (rep.content.couponList) {
          me.isShowDistance = rep.content.flag
          if (rep.content.couponList.length < me.couponInfoPageLimit) {
            setTimeout(function() {
              me.noMoreCoupon = true;
            }, 300);
          }
          if (rep.content.couponList.length == me.couponInfoPageLimit) { //如果列表数据够10条，开启下拉加载
            me.loading = false;
            me.noMoreCoupon = true;
          }
        } else {
          setTimeout(function() {
            me.noMoreCoupon = true;
          }, 300);
        }
      }).catch(function(rep) {
        setTimeout(function() {
          me.noMoreCoupon = true;
        }, 300);
      });
    },
    mySearch() { //搜索
      this.loading = true;
      this.noMoreCoupon = true;
      this.$store.commit(types.GET_PAGE_NUM, 1);
      this.$store.commit(types.GET_COUPON_LIST);
      this.clickMoreList();
    },
    moreList: function() {
      this.noMoreCoupon = true;
      this.clickMoreList();
    },
    tabEvent: function(num) { //标签切换

      this.tab1 = num;
      this.$store.commit(types.GET_PAGE_NUM, 1);
      this.$store.commit(types.GET_COUPON_LIST);
      this.noMoreCoupon = true;
      this.clickMoreList();
    },
    couponDetail: function(params) { //查看详情
      let me = this;
      if (me.myRootType == 'recommend') {
        me.exchageShow = true;
        me.couponParam = params;
        return;
      }

      Storage.set("couponInfo", params);

      if (!params.mchtName) {
        this.$router.push({
          name: 'couDetail',
          query: {
            seq: params.seqNo || params.id || '',
            couponId: params.couponId,
            mchtId: params.mchtId,
            usrPicId: params.usrPicId || '',
            usrId: params.usrId || params.sellUsr || '' // 挂单用户ID
          }
        });
      } else {
        this.$router.push({
          name: 'merchDetail',
          query: {
            mchtId: params.mchtId
          }
        });
      }

    },
    hiddenBox: function(hidden) {
      this.exchageShow = false;
    }
  }
}
</script>
<style scoped>
.coupon_list {
  /*background: #fff;*/
  /*box-shadow: 0 0.1rem 0.2rem rgba(100,100,100,.15);*/
  margin: 0 .667rem;
  margin-bottom: 1rem;
  border-radius: .2rem;
  position: relative;
  /*min-height: 7rem;*/
}

.lastInfo {
  font-size: 1rem;
  text-align: center;
  color: #999;
}

.btnLine {
  line-height: 3rem;
  height: 3rem
}

.index_cp_pri {
  text-align: right;
  margin: 0 0.2rem 0.4rem 0
}

.index_cp_pri b {
  font-size: 1.6rem
}

.index_cp_r {
  top: 0.8rem;
}

.index_cp_tit {
  width: -webkit-calc(100% - 6rem);
  width: calc(100% - 6rem);
}

.longClick {
  display: flex;
  width: 100%;
  height: 100%;
}

.user_img {
  width: 1.35rem;
  height: 1.35rem;
  vertical-align: text-bottom;
}
</style>
